<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <a-popover
        trigger="click"
        position="rt"
        :visible="visible"
        @click="visible = false"
      >
        <div
          style="
            height: 20px;
            width: 20px;
            background: transparent;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          "
        >
          <icon-plus-circle-fill style="color: #165dff" size="30" />
        </div>
        <template #content>
          <div style="display: flex; flex-direction: row; flex-wrap: wrap">
            <div class="tagNode" @click="addType(1)">
              <svg-icon
                style="height: 20px"
                class="icon"
                name="shenpijiedian"
              />
              <span style="margin-top: 5px">审批节点</span>
            </div>
            <div class="tagNode" @click="addType(2)">
              <svg-icon style="height: 20px" class="icon" name="chaosong" />
              <span style="margin-top: 5px">抄送节点</span>
            </div>
            <div class="tagNode" @click="addType(3)">
              <svg-icon
                style="height: 20px"
                class="icon"
                name="tiaojianjiedian"
              />
              <span style="margin-top: 5px">条件节点</span>
            </div>
          </div>
        </template>
      </a-popover>
    </div>
  </div>
</template>

<script>
  import { useAppStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  export default {
    props: {
      modelValue: { type: Object, default: () => {} },
    },
    data() {
      return {
        visible: false,
        store: useAppStore(),
      };
    },
    mounted() {},
    methods: {
      getNodeKey() {
        return 'flk' + Date.now();
      },
      addType(type) {
        let node = {};
        if (type == 1) {
          node = {
            node_name: '审核节点',
            nodeKey: this.getNodeKey(),
            node_type: 1,
            approve_type: 1, //审批类型
            approve_sign_type: 1, // 审批方式
            node_assignee_list: [], // 审批人员或抄送列表
            copy_type: 1,
            node_conditions: [], // 条件分支
            child_node: this.modelValue,
          };
        } else if (type == 2) {
          node = {
            node_name: '抄送节点',
            nodeKey: this.getNodeKey(),
            node_type: 2,
            approve_type: '',
            copy_type: 1, // 抄送人类型
            node_assignee_list: [], // 抄送列表
            node_conditions: [],
            child_node: this.modelValue,
          };
        } else if (type == 3) {
          if (this.store.appConditions.length === 0) {
            Message.warning('请选择预设条件后再添加节点！');
            return false;
          }
          // 条件路由
          node = {
            node_name: '条件路由',
            nodeKey: this.getNodeKey(),
            node_type: 3,
            node_conditions: [
              {
                node_name: '条件1',
                nodeKey: this.getNodeKey(),
                node_type: 4,
                condition_list: [
                  [
                    {
                      label: '',
                      field: '',
                      operator: '',
                      value: '',
                    },
                  ],
                ],
                child_node: [],
              },
              {
                node_name: '条件2',
                nodeKey: this.getNodeKey(),
                node_type: 4,
                condition_list: [
                  [
                    {
                      label: '',
                      field: '',
                      operator: '',
                      value: '',
                    },
                  ],
                ],
                child_node: [],
              },
            ],
            child_node: this.modelValue,
          };
        }
        this.$emit('update:modelValue', node);
      },
    },
  };
</script>

<style lang="less" scoped>
  .tagNode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    cursor: pointer;
    padding: 10px;
    &:hover {
      background: #f2f3f5;
    }
  }
</style>
